<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>data-v研究</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/main.css">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="box" id="pageBox">
    <div id="top" class="top">
        <div class="pull-left system-name">
            全链路监控系统
        </div>
        <div class="pull-left system-sel">
            <span>监控视图：</span>
            <select id="system_select" class="form-control">
            <option value="">请选择</option>
        </select>
        </div>
        <div class="pull-right guide">操作说明
            <div>
                <p>1、拖拉左侧模板组件至右侧画布区即可在画布区生成对应的组件</p>
                <p>2、画布区生成的组件也可以再次进行拖拉移动改变位置</p>
                <p>3、在画面区鼠标移动到对应的组件上面，右上角会显示连线和删除小图标</p>
                <p>4、点击删除小图标即可删除组件，点击连线图标后鼠标再移动到另外一个组件点击连线图标即可连接两个组件</p>
                <p>5、双击生成的连线即可删除两个组件间的连线</p>
                <p>6、鼠标移入画布区部分相应组件显示组件详细信息</p>
                <p>7、鼠标单击系统组件进入子系统画布</p>
                <p>8、鼠标移入连线，显示连线状态</p>
            </div>
        </div>
        <div id="save_btn" class="pull-right save">
            保存
        </div>
    </div>
    <div id="left" class="left">
        <h3>选择后拖至右侧画布区</h3>
        <ul id="hardware_list" class="list-unstyled"></ul>
    </div>
    <div id="right" class="right">
        <div id="canvas" class="canvas">
            <div id="render" class="render"></div>
        </div>
    </div>
    <div id="property" class="property hide">
        <h3 class="title">属性面板<span class="glyphicon glyphicon-remove pull-right"></span></h3>
        <ul class="list-unstyled">
            <li>
                <h5>组件名称：</h5>
                <input id="property_name" class="form-control" />
            </li>
            <li>
                <a id="property_btn_modify" class="btn btn-success">修改</a>
            </li>
        </ul>
    </div>
</div>
<div id="box_inner" class="box box-inner hide">
    <div class="top">
        子视图
        <span class="pull-left back">返回</span>
    </div>
    <div class="left">
        <h3>选择后拖至右侧画布区</h3>
        <ul class="list-unstyled">
        </ul>
    </div>
    <div class="right right-inner">
        <div class="canvas" id="inner_canavs">
            <div class="render" id="inner_render" ></div>
        </div>
    </div>
</div>
<div id="save_modal" class="modal fade save-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">保存模板</h4>
            </div>
            <div class="modal-body">
                <div class="form-box">
                    <div class="form-item">
                        <span class="tit">模板名称：</span>
                        <input id="temp_name" type="text" class="form-control"/>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="save_modal_btn" type="button" class="btn btn-primary">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<div id="save_success_modal" class="modal fade save-success-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">提示信息</h4>
            </div>
            <div class="modal-body">
                保存成功
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="m-alert">
    <span class="content">我是提示内容</span>
    <a class="closed pull-right"><span aria-hidden="true">&times;</span></a>
</div>
<script>
    function openInnerSys(){
        $('#box_inner').removeClass('hide');
        $("#pageBox").addClass('hide')
    }
</script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/zrender/esl.js"></script>
<script src="js/zrender-config.js"></script>
<script src="js/config.js"></script>
<script src="js/main.js"></script>
</body>
</html>